import React, { Component } from "react";
import { withCopyRight } from "../../HOCDemo/withCopyRight";

class TodoList extends Component {
  //原数据【全部数据】
  sourceTodos = [
    {
      id: 1,
      text: "吃饭",
      done: true,
    },
    {
      id: 2,
      text: "睡觉",
      done: false,
    },
    {
      id: 3,
      text: "打豆豆",
      done: false,
    },
    {
      id: 4,
      text: "打游戏",
      done: false,
    },
  ];

  state = {
    newTodo: "",
    queryDone: "all",
    sourceTodos: [...this.sourceTodos],
    todos: [...this.sourceTodos],
  };

  changeNewTodo = (e) => {
    this.setState({
      newTodo: e.target.value,
    });
  };

  changeDone = (e) => {
    let item = this.state.todos.find((item) => item.id == e.target.value);
    item.done = !item.done;
    this.setState({});
  };

  //   添加待办任务
  addTodo = () => {
    this.setState(
      {
        sourceTodos: [
          ...this.state.sourceTodos,
          {
            id: this.state.sourceTodos.length + 1,
            text: this.state.newTodo,
            done: false,
          },
        ],
        newTodo: "",
      },
      () => {
        this.search(this.state.queryDone);
      }
    );
  };

  //   删除
  deleteTodo = (id) => {
    this.setState({
      todos: this.state.todos.filter((item) => item.id !== id),
    });
  };

  // 查询条件：
  changeQueryDone = (e) => {
    this.setState({
      queryDone: e.target.value,
    });

    this.search(e.target.value);
  };

  //   查询：
  search = (done) => {
    this.setState({
      todos: this.state.sourceTodos.filter((item) => {
        if (done === "all") {
          return true;
        } else if (done === "done") {
          return item.done;
        } else {
          return !item.done;
        }
      }),
    });
  };

  render() {
    return (
      <div>
        <h1>TodoList</h1>
        <p>
          <input
            type="text"
            value={this.state.newTodo}
            onChange={this.changeNewTodo}
          />
          <input type="button" value="添加待办" onClick={this.addTodo} />
        </p>
        <p>
          <input
            type="radio"
            checked={this.state.queryDone === "all"}
            value="all"
            onChange={this.changeQueryDone}
          />
          <label>全部</label>
          <input
            type="radio"
            checked={this.state.queryDone === "done"}
            value="done"
            onChange={this.changeQueryDone}
          />
          <label>已完成</label>
          <input
            type="radio"
            checked={this.state.queryDone === "todo"}
            value="todo"
            onChange={this.changeQueryDone}
          />
          <label>未完成</label>
        </p>
        <ul>
          {this.state.todos.map((item, index) => {
            return (
              <li key={item.id}>
                <input
                  type="checkbox"
                  checked={item.done}
                  value={item.id}
                  onChange={this.changeDone}
                />
                <label>{item.text}</label>
                <input
                  type="button"
                  value="删除"
                  onClick={() => this.deleteTodo(item.id)}
                />
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default withCopyRight(TodoList);
